<template>
    <mt-popup  @touchmove.prevent class="game-gift-popup" popup-transition="popup-fade" :closeOnClickModal=false :modal=true v-model="isShow">
        <p class="celebrate">恭喜您获得</p>
        <div class="gift-list">
            <div class="icon-box"><span class="iconfont icon-shengri"></span></div>
            <div class="gift-item" v-for="(item,index) in giftList" :key="index">
                <img class="gift-icon" :src="soursePath+item.icon"/>
                <span class="gift-name">{{item.gname}}</span>
            </div>
        </div>
        <p v-show="!phoneno" class="bind-tip">绑定手机后可领取奖励</p>
        <mt-button size="small" class="sure" type="default" @click="sureBtnClick">{{btnWord}}</mt-button>
    </mt-popup>
</template>

<script>
import { mapState } from "vuex";
import Vue from "vue";
import { Popup, Button, Toast } from "mint-ui";
import "mint-ui/lib/button/style.css";
import "mint-ui/lib/popup/style.css";
import "mint-ui/lib/toast/style.css";
Vue.component(Button.name, Button);
Vue.component(Popup.name, Popup);
Vue.component(Toast.name, Toast);

export default {
  name: "game-gift-popup",
  data() {
    return {
      canRequest: true
    };
  },
  components: {},
  created() {},
  methods: {
    sureBtnClick() {
      if (!this.phoneno) {
        this.$store.commit("UPDATA_SHOW_GIFT_POPUP", false);
        this.$router.push({ path: "bindPhone" });
      } else {
        this.getGift();
      }
    },
    getGift() {
      //领取礼品
      if (!this.canRequest) return;
      this.canRequest = false;
      let idStr=''
      for(let i=0;i<this.giftList.length;i++){
        if(i==0) idStr+=this.giftList[i].awardid;
        else idStr+=','+this.giftList[i].awardid;
      }
      this.$http
        .post(this.path + `store/Games/getGameReward`, {
          userid:this.userid,
          grewardid:idStr
        })
        .then(response => {
          this.canRequest = true;
          var respdata = response.body;
          if (respdata.status == "ok") {
            Toast({
              message: "领取成功，请至'购买记录'中查看!",
              duration: 2000
            });
            this.$store.commit("UPDATA_SHOW_GIFT_POPUP", false);
            this.$store.commit("UPDATA_GIFT_LIST",[]);
          } else {
            Toast({ message: respdata.msg, duration: 1500 });
            this.$store.commit("UPDATA_SHOW_GIFT_POPUP", false);
          }
        })
        .catch(response => {
          //请求出错处理
          console.log(response);
        });
    }
  },
  computed: {
    ...mapState([
      "gameGiftPopupShow",
      "phoneno",
      "soursePath",
      "openid",
      "path",
      "userid",
      "storeid",
      "giftList"
    ]),
    isShow: {
      get: function() {
        return this.gameGiftPopupShow;
      },
      set: function(boo) {
        this.$store.commit("UPDATA_SHOW_GIFT_POPUP", boo);
      }
    },
    btnWord(){
        if(this.phoneno) return '领取';
        else return '去绑定';
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.game-gift-popup {
    width: 88%;
    border-radius: 8px;
    text-align: center;
    box-sizing: border-box;
    padding: 0.24rem 0.15rem 0.2rem 0.15rem;

    .celebrate {
        font-size: 0.2rem;
        letter-spacing: 0;
        font-weight: 600;
        color: #333;
    }

    .gift-list {
        position: relative;
        margin-top: 0.22rem;
        margin-bottom: 0.18rem;
        padding: 0.1rem 0 0.1rem 0;
        width: 100%;
        border: 1px #ddd dashed;
        border-radius 0.03rem;

        .icon-box {
            position: absolute;
            left: 0.06rem;
            top: -0.18rem;
            background-color #fff;

            .icon-shengri {
                color: #aeaeae;
                font-size: 0.28rem;
            }
        }

        .gift-item {
            min-height: 0.46rem;
            display: flex;
            align-items: center;
            justify-content: center;

            .gift-icon {
                height: 0.4rem;
                width: 0.4rem;
            }

            .gift-name {
                margin-left: 0.14rem;
                margin-top: 0.02rem;
                color: #707070;
                font-size: 0.13rem;
                line-height: 0.17rem;
            }
        }
    }

    .bind-tip{
        font-size .12rem;
        color #999;
        margin-bottom 0.06rem;
    }

    .sure {
        width: 60%;
        height: 0.3rem;
        box-shadow: none;
        color: #fff;
        background-color: #f2a5ba;
        opacity: 0.9;
        letter-spacing: 0.03rem;
        font-size: 0.14rem;
    }
}
</style>
